Truyền Lỗi trong React Hook: Làm chủ Chuỗi Lỗi khi Tải Tài nguyên

Các ứng dụng React hiện đại thường phụ thuộc vào việc lấy dữ liệu từ nhiều nguồn khác nhau – API, cơ sở dữ liệu, hoặc thậm chí là bộ nhớ cục bộ. Khi các hoạt động tải tài nguyên này thất bại, việc xử lý lỗi một cách duyên dáng và cung cấp trải nghiệm có ý nghĩa cho người dùng là rất quan trọng. Bài viết này khám phá cách quản lý và truyền lỗi hiệu quả trong các ứng dụng React bằng cách sử dụng custom hook, error boundary và một chiến lược xử lý lỗi mạnh mẽ.

Hiểu về Thách thức của việc Truyền Lỗi

Trong một cây component React thông thường, lỗi có thể xảy ra ở nhiều cấp độ khác nhau. Một component lấy dữ liệu có thể gặp lỗi mạng, lỗi phân tích cú pháp hoặc lỗi xác thực. Lý tưởng nhất, những lỗi này nên được bắt và xử lý một cách thích hợp, nhưng việc chỉ ghi lại lỗi trong component nơi nó phát sinh thường không đủ. Chúng ta cần một cơ chế để:

• Báo cáo lỗi đến một nơi tập trung: Điều này cho phép ghi log, phân tích và có khả năng thử lại.
• Hiển thị thông báo lỗi thân thiện với người dùng: Thay vì một giao diện người dùng bị hỏng, hãy thông báo cho người dùng về vấn đề và đề xuất các giải pháp khả thi.
• Ngăn chặn các lỗi dây chuyền: Một lỗi trong một component không nên làm sập toàn bộ ứng dụng.

Đây là lúc việc truyền lỗi phát huy tác dụng. Truyền lỗi liên quan đến việc chuyển lỗi lên cây component cho đến khi nó đến một ranh giới xử lý lỗi phù hợp. Error boundary của React được thiết kế để bắt các lỗi xảy ra trong quá trình render, các phương thức vòng đời và constructor của các component con của chúng, nhưng chúng không xử lý các lỗi được ném ra trong các hoạt động bất đồng bộ như những lỗi được kích hoạt bởi useEffect. Đây là nơi mà các custom hook có thể thu hẹp khoảng cách.

Tận dụng Custom Hook để Xử lý Lỗi

Custom hook cho phép chúng ta đóng gói logic có thể tái sử dụng, bao gồm cả xử lý lỗi, trong một đơn vị duy nhất, có thể kết hợp. Hãy tạo một custom hook, useFetch, để xử lý việc lấy dữ liệu và quản lý lỗi.

Ví dụ: Một useFetch Hook Cơ bản

Đây là phiên bản đơn giản hóa của hook useFetch:

            
import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Clear any previous errors
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

            

              
                Copy
              
            
          

Hook này lấy dữ liệu từ một URL đã cho và quản lý trạng thái tải và các lỗi tiềm ẩn. Biến trạng thái error chứa bất kỳ lỗi nào xảy ra trong quá trình lấy dữ liệu.

Truyền Lỗi Lên Cấp trên

Bây giờ, hãy cải tiến hook này để truyền lỗi lên cấp trên bằng cách sử dụng context. Điều này cho phép các component cha được thông báo về các lỗi xảy ra trong hook useFetch.

1. Tạo một Error Context

Đầu tiên, chúng ta tạo một React context để chứa hàm xử lý lỗi:

            
import { createContext, useContext } from 'react';

const ErrorContext = createContext(null);

export const ErrorProvider = ErrorContext.Provider;

export const useError = () => useContext(ErrorContext);

            

              
                Copy
              
            
          

2. Sửa đổi useFetch Hook

Bây giờ, chúng ta sửa đổi hook useFetch để sử dụng error context:

            
import { useState, useEffect } from 'react';
import { useError } from './ErrorContext';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [localError, setLocalError] = useState(null); // Local error state
  const handleError = useError(); // Get the error handler from context

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLocalError(null);
      } catch (e) {
        setLocalError(e);
        if (handleError) {
          handleError(e); // Propagate the error to the context
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url, handleError]);

  // Return both data and local error. Component can decide which to display.
  return { data, loading, localError };
}

export default useFetch;

            

              
                Copy
              
            
          

Lưu ý rằng bây giờ chúng ta có hai trạng thái lỗi: localError, được quản lý bên trong hook, và lỗi được truyền qua context. Chúng ta sử dụng localError nội bộ, nhưng nó cũng có thể được truy cập để xử lý ở cấp component.

3. Bọc Ứng dụng bằng ErrorProvider

Ở gốc ứng dụng của bạn, hãy bọc các component sử dụng useFetch bằng ErrorProvider. Điều này cung cấp context xử lý lỗi cho tất cả các component con:

            
import React, { useState } from 'react';
import { ErrorProvider } from './ErrorContext';
import MyComponent from './MyComponent';

function App() {
  const [globalError, setGlobalError] = useState(null);

  const handleError = (error) => {
    console.error("Error caught at the top level:", error);
    setGlobalError(error);
  };

  return (
    
      {globalError ? (
        
Error: {globalError.message}
      ) : (
        
      )}
    
  );
}

export default App;

            

              
                Copy
              
            
          

4. Sử dụng useFetch Hook trong một Component

            
import React from 'react';
import useFetch from './useFetch';

function MyComponent() {
  const { data, loading, localError } = useFetch('https://api.example.com/data');

  if (loading) {
    return 
Loading...
;
  }

  if (localError) {
    return 
Error loading data: {localError.message}
;
  }

  return (
    

      
Data:
      
{JSON.stringify(data, null, 2)}
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Giải thích

• Error Context: ErrorContext cung cấp một cách để chia sẻ hàm xử lý lỗi (handleError) trên các component.
• Truyền lỗi: Khi có lỗi xảy ra trong useFetch, hàm handleError được gọi, truyền lỗi lên component App.
• Xử lý lỗi tập trung: Component App bây giờ có thể xử lý lỗi một cách tập trung, ghi log, hiển thị thông báo lỗi hoặc thực hiện các hành động thích hợp khác.

Error Boundaries: Lưới An toàn cho các Lỗi Bất ngờ

Trong khi custom hook và context cung cấp một cách để xử lý lỗi từ các hoạt động bất đồng bộ, Error Boundaries là cần thiết để bắt các lỗi bất ngờ có thể xảy ra trong quá trình render. Error Boundaries là các component React bắt lỗi JavaScript ở bất kỳ đâu trong cây component con của chúng, ghi lại các lỗi đó và hiển thị một giao diện người dùng dự phòng thay vì cây component bị sập. Chúng bắt lỗi trong quá trình render, trong các phương thức vòng đời và trong các constructor của toàn bộ cây bên dưới chúng.

Tạo một Component Error Boundary

            
import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error in ErrorBoundary:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        

          
Something went wrong.
          

            {this.state.error && this.state.error.toString()}\n			

            {this.state.errorInfo && this.state.errorInfo.componentStack}
          
        
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Sử dụng Error Boundary

Bọc bất kỳ component nào có khả năng ném ra lỗi bằng component ErrorBoundary:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    

      
        
      
    
  );
}

export default App;

            

              
                Copy
              
            
          

Kết hợp Error Boundaries và Custom Hooks

Để xử lý lỗi mạnh mẽ nhất, hãy kết hợp Error Boundaries với các custom hook như useFetch. Error Boundaries bắt các lỗi render bất ngờ, trong khi custom hook quản lý lỗi từ các hoạt động bất đồng bộ và truyền chúng lên cấp trên. ErrorProvider và ErrorBoundary có thể cùng tồn tại; ErrorProvider cho phép xử lý và báo cáo lỗi chi tiết, trong khi ErrorBoundary ngăn chặn sự cố ứng dụng thảm khốc.

Các Thực hành Tốt nhất để Xử lý Lỗi trong React

• Ghi log Lỗi Tập trung: Gửi lỗi đến một dịch vụ ghi log tập trung để theo dõi và phân tích. Các dịch vụ như Sentry, Rollbar và Bugsnag là những lựa chọn tuyệt vời. Cân nhắc sử dụng mức độ ghi log (ví dụ: `console.error`, `console.warn`, `console.info`) để phân biệt mức độ nghiêm trọng của các sự kiện.
• Thông báo Lỗi Thân thiện với Người dùng: Hiển thị thông báo lỗi rõ ràng và hữu ích cho người dùng. Tránh các thuật ngữ kỹ thuật và cung cấp các đề xuất để giải quyết vấn đề. Hãy nghĩ đến việc bản địa hóa: đảm bảo các thông báo lỗi dễ hiểu đối với người dùng ở các ngôn ngữ và bối cảnh văn hóa khác nhau.
• Suy giảm Dần (Graceful Degradation): Thiết kế ứng dụng của bạn để suy giảm một cách duyên dáng trong trường hợp có lỗi. Ví dụ: nếu một lệnh gọi API cụ thể thất bại, hãy ẩn component tương ứng hoặc hiển thị một trình giữ chỗ thay vì làm sập toàn bộ ứng dụng.
• Cơ chế Thử lại: Triển khai cơ chế thử lại cho các lỗi tạm thời, chẳng hạn như sự cố mạng. Tuy nhiên, hãy cẩn thận để tránh các vòng lặp thử lại vô hạn, điều này có thể làm vấn đề trở nên trầm trọng hơn. Backoff theo cấp số nhân là một chiến lược tốt.
• Kiểm thử: Kiểm tra kỹ lưỡng logic xử lý lỗi của bạn để đảm bảo rằng nó hoạt động như mong đợi. Mô phỏng các kịch bản lỗi khác nhau, chẳng hạn như lỗi mạng, dữ liệu không hợp lệ và lỗi máy chủ. Cân nhắc sử dụng các công cụ như Jest và React Testing Library để viết các bài kiểm tra đơn vị và tích hợp.
• Giám sát: Liên tục giám sát ứng dụng của bạn để phát hiện lỗi và các vấn đề về hiệu suất. Thiết lập cảnh báo để được thông báo khi có lỗi xảy ra, cho phép bạn phản ứng nhanh chóng với các vấn đề.
• Cân nhắc Bảo mật: Ngăn chặn thông tin nhạy cảm hiển thị trong các thông báo lỗi. Tránh bao gồm dấu vết ngăn xếp (stack traces) hoặc chi tiết máy chủ nội bộ trong các thông báo hướng tới người dùng, vì thông tin này có thể bị các tác nhân độc hại khai thác.

Các Kỹ thuật Xử lý Lỗi Nâng cao

Sử dụng Giải pháp Quản lý Trạng thái Lỗi Toàn cục

Đối với các ứng dụng phức tạp hơn, hãy cân nhắc sử dụng một giải pháp quản lý trạng thái toàn cục như Redux, Zustand hoặc Recoil để quản lý trạng thái lỗi. Điều này cho phép bạn truy cập và cập nhật trạng thái lỗi từ bất kỳ đâu trong ứng dụng của mình, cung cấp một cách xử lý lỗi tập trung. Ví dụ, bạn có thể gửi một action để cập nhật trạng thái lỗi khi có lỗi xảy ra và sau đó sử dụng một selector để lấy trạng thái lỗi trong bất kỳ component nào.

Triển khai các Lớp Lỗi Tùy chỉnh

Tạo các lớp lỗi tùy chỉnh để đại diện cho các loại lỗi khác nhau có thể xảy ra trong ứng dụng của bạn. Điều này cho phép bạn dễ dàng phân biệt giữa các loại lỗi khác nhau và xử lý chúng một cách tương ứng. Ví dụ, bạn có thể tạo một lớp NetworkError, một lớp ValidationError và một lớp ServerError. Điều này sẽ làm cho logic xử lý lỗi của bạn được tổ chức và dễ bảo trì hơn.

Sử dụng Mẫu Circuit Breaker (Bộ ngắt mạch)

Mẫu circuit breaker là một mẫu thiết kế có thể giúp ngăn chặn các lỗi dây chuyền trong các hệ thống phân tán. Ý tưởng cơ bản là bọc các lệnh gọi đến các dịch vụ bên ngoài trong một đối tượng circuit breaker. Nếu circuit breaker phát hiện một số lượng lỗi nhất định, nó sẽ "mở" mạch và ngăn chặn bất kỳ lệnh gọi nào tiếp theo đến dịch vụ bên ngoài. Sau một khoảng thời gian nhất định, circuit breaker "nửa mở" mạch và cho phép một lệnh gọi duy nhất đến dịch vụ bên ngoài. Nếu lệnh gọi thành công, circuit breaker sẽ "đóng" mạch và cho phép tất cả các lệnh gọi đến dịch vụ bên ngoài tiếp tục. Điều này có thể giúp ngăn ứng dụng của bạn bị quá tải bởi các lỗi trong các dịch vụ bên ngoài.

Các Vấn đề cần Cân nhắc về Quốc tế hóa (i18n)

Khi làm việc với khán giả toàn cầu, quốc tế hóa là tối quan trọng. Các thông báo lỗi nên được dịch sang ngôn ngữ ưa thích của người dùng. Hãy cân nhắc sử dụng một thư viện như i18next để quản lý các bản dịch một cách hiệu quả. Hơn nữa, hãy lưu ý đến sự khác biệt văn hóa trong cách nhìn nhận lỗi. Ví dụ, một thông báo cảnh báo đơn giản có thể được diễn giải khác nhau ở các nền văn hóa khác nhau, vì vậy hãy đảm bảo giọng văn và từ ngữ phù hợp với đối tượng mục tiêu của bạn.

Các Kịch bản Lỗi Thường gặp và Giải pháp

Lỗi Mạng

Kịch bản: Máy chủ API không khả dụng, hoặc kết nối internet của người dùng bị mất.

Giải pháp: Hiển thị một thông báo cho biết có sự cố mạng và đề nghị kiểm tra kết nối internet. Triển khai cơ chế thử lại với backoff theo cấp số nhân.

Dữ liệu không hợp lệ

Kịch bản: API trả về dữ liệu không khớp với lược đồ dự kiến.

Giải pháp: Triển khai xác thực dữ liệu ở phía máy khách để bắt dữ liệu không hợp lệ. Hiển thị thông báo lỗi cho biết dữ liệu bị hỏng hoặc không hợp lệ. Cân nhắc sử dụng TypeScript để thực thi các kiểu dữ liệu tại thời điểm biên dịch.

Lỗi Xác thực

Kịch bản: Mã thông báo xác thực của người dùng không hợp lệ hoặc đã hết hạn.

Giải pháp: Chuyển hướng người dùng đến trang đăng nhập. Hiển thị thông báo cho biết phiên của họ đã hết hạn và họ cần đăng nhập lại.

Lỗi Phân quyền

Kịch bản: Người dùng không có quyền truy cập vào một tài nguyên cụ thể.

Giải pháp: Hiển thị thông báo cho biết họ không có quyền cần thiết. Cung cấp một liên kết để liên hệ với bộ phận hỗ trợ nếu họ tin rằng mình nên có quyền truy cập.

Lỗi Máy chủ

Kịch bản: Máy chủ API gặp phải một lỗi không mong muốn.

Giải pháp: Hiển thị một thông báo lỗi chung cho biết có sự cố với máy chủ. Ghi lại lỗi ở phía máy chủ để phục vụ cho việc gỡ lỗi. Cân nhắc sử dụng một dịch vụ như Sentry hoặc Rollbar để theo dõi các lỗi máy chủ.

Kết luận

Xử lý lỗi hiệu quả là rất quan trọng để tạo ra các ứng dụng React mạnh mẽ và thân thiện với người dùng. Bằng cách kết hợp custom hook, error boundary và một chiến lược xử lý lỗi toàn diện, bạn có thể đảm bảo rằng ứng dụng của mình xử lý lỗi một cách duyên dáng và cung cấp trải nghiệm có ý nghĩa cho người dùng, ngay cả khi tải tài nguyên thất bại. Hãy nhớ ưu tiên việc ghi log lỗi tập trung, thông báo lỗi thân thiện với người dùng và suy giảm dần. Bằng cách tuân theo các thực hành tốt nhất này, bạn có thể xây dựng các ứng dụng React có khả năng phục hồi, đáng tin cậy và dễ bảo trì, bất kể vị trí hay nền tảng của người dùng.